<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test21</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
            src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js">
    </script>
</head>
<body>
<h1 style="text-align: center">HTML复习历程-24</h1>
<div id="app">
    <p>jquery html</p>
    <br>
    <div>
        <p>1、捕获</p>
        <ul>
            <li>text() - 设置或返回所选元素的文本内容</li>
            <li>html() - 设置或返回所选元素的内容（包括 HTML 标记）</li>
            <li>val() - 设置或返回表单字段的值</li>
            <li>attr() - 方法用于获取属性值</li>
        </ul>
        <p id="show"><strong>捕获：</strong>操作 DOM 的能力</p>
        <input id="input" value="liming" placeholder="请输入...">
        <br>
        <br>
        <button class="show1">text</button>
        <button class="show2">html</button>
        <button class="show3">val</button>
        <button class="show4">attr</button>
        <p id="result1"></p>
    </div>
    <br>

</div>
<script>
    $(document).ready(function () {
        $("button.show1").click(function () {
            alert($("#show").text())
        })
        $("button.show2").click(function () {
            alert($("#show").html())
        })
        $("button.show3").click(function () {
            alert($("#input").val())
        })
        $("button.show4").click(function () {
            alert($("#input").attr("placeholder"))
        })
    })
</script>
</body>
</html>